
<template>
  <div
    class="chart"
    ref="chart_ref"
    :style="{ width: '100%', height: `${height}` }"
  ></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    options: {
      type: Object,
      default () {
        return {}
      }
    },
    height: {
      type: String,
      default () {
        return '260px'
      }
    }
  },
  data () {
    return {
      chart_dom: null,
    }
  },
  mounted () {
    this.chart_dom = echarts.init(this.$refs.chart_ref)
    this.chart_dom.setOption(this.options)
  },
  watch: {
    options: {
      handler () {
        this.chart_dom.setOption(this.options)
      },
      deep: true
    }
  }
}
</script>

<style>
</style>